<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>评论标签</legend>
    </fieldset>
    <div class="layui-btn-group demoTable">
        <button class="layui-btn" data-type="getCheckData" id="commentAlldata">获取选中行数据</button>
        <button class="layui-btn" data-type="getCheckLength" id="commentAllNum">获取选中数目</button>
        <button class="layui-btn" data-type="refresh" id="commentAllRefresh">刷新</button>
        <button class="layui-btn" data-type="addUser" id="commentAllAdd">添加</button>
    </div>
    <table class="layui-hide" id="commentTables" lay-filter="commentTables"></table>
    <div style="display: none" id="commentbarDemo" type="text/html">
        <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    </div>
</div>
<script>
    layui.use(['table', 'util', 'config', 'tree', 'config'], function () {
        var table = layui.table;
        var config = layui.config;
        var util = layui.util;
        var tree = layui.tree;
        var config = layui.config;
        table.render({
            elem: '#commentTables',
            id: "comment"
            , url: config.base_server + 'GetcommentList'
            , cols: [[
                { type: 'checkbox' }
                , { field: 'commentId', title: '评论编号', sort: true, minWidth: 20 }
                , { field: 'commentTitle', title: '评论标题', minWidth: 100 }
                , { field: 'userName', title: '评论用户', minWidth: 100 }
                , { field: 'movieName', title: '评论电影', minWidth: 100 }
                , { field: 'commentScore', title: '评论评分', minWidth: 100 }
                , { field: 'commentTime', title: '评论时间', minWidth: 100 }
                , { field: 'commentPraise', title: '点赞数目', minWidth: 50 }
                , { field: 'commentCom', title: '评论内容', minWidth: 100 }
                , { title: '操作', toolbar: '#commentbarDemo',width:"20%" }
            ]]
            , page: true //开启分页
            , skin: 'row' //行边框风格
            , even: true //开启隔行背景
            , size: 'lg' //小尺寸的表格
        });

        table.on('tool(commentTables)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                var editId = data.commentId;
                layer.confirm('真的删除该评论吗?', function (index) {
                    $.ajax({
                        type: "POST",
                        url: config.base_server + "DeletecommentById",
                        data: { commentId: editId },
                        dataType: "json",
                        success: (data) => {
                            if (data.code) {
                                obj.del();
                                // table.reload('user');
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                layer.close(index);
                            } else {
                                alert(data.info);
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                var editId = data.commentId;
                var fu = layer.open({
                    type: 2,
                    title: "编辑" + editId + "号评论",
                    area: ['800px', '800px'],
                    fix: false,
                    content: 'components/system/commentEditTable.html?editNo=' + editId,
                    maxmin: true,
                    end: function () {
                        table.reload('comment');
                    }
                });

            } else if (obj.event === 'detail') {
                var editId = data.commentId;
                var fu = layer.open({
                    type: 2,
                    title: "查看" + editId + "号评论",
                    area: ['600px', '600px'],
                    fix: false,
                    content: 'components/system/commentDetailTable.html?editNo=' + editId,
                    maxmin: true,
                    end: function () {
                        table.reload('comment');
                    }
                });
            }
        });

        $('#commentAlldata').on('click', function () {
            var checkStatus = table.checkStatus('comment')
                , data = checkStatus.data;
            layer.alert(data.map(item => {
                return item.userName;
            }).join(","));
        });
        $('#commentAllNum').on('click', function () {

            var checkStatus = table.checkStatus('comment')
                , data = checkStatus.data;
            var datas = JSON.stringify(data)
            var ids = ''
            for (var i = 0; i < datas.length; i++) {
                ids = ids + datas[i].UserNo
            }
            layer.msg('选中了：' + data.length + ' 个');

        });

        $('#commentAllRefresh').on('click', function () {
            location.reload();
        });

        //添加按钮 
        $('#commentAllAdd').on('click', function () {
            var fu = layer.open({
                type: 2,
                title: '添加',
                area: ['800px', '800px'],
                fix: false,
                content: 'components/system/commentAddable.html',
                maxmin: true,
                end: function () {
                    table.reload('comment');
                }
            });
        });
    });

</script>